import React from 'react';
import {
    Button,
    Card,
    Form,
    Row,
    Col,
    Input,
    Select,
    DatePicker,
    InputNumber,
    Radio,
} from 'antd';

// antd :就代表UI库

// cmd : 输入 yarn -v, 正常的话会输入版本

// 1、安装脚手架：npm create umi
// yarn crate umi

// 2、安装依赖
// 配置国内的下载源：npm config set registry https://registry.npmjs.org/
// yarn config set registry https://registry.npmjs.org/
// 安装：npm install     -----    yarn

// 3、运行
// npm start
// yarn start

// 4、去除国际化
// npm run i18n-remove
// yarn i18n-remove


const { Item } = Form;
const { Option } = Select;

@Form.create() // 将表单字段和后端api字段双向绑定
class Study extends React.Component {
    // state :代表是当前class类状态值
    state = {
        status: false, // bool
    }

    handleSubmit = () => {
        const { form } = this.props;
        form.validateFields((err, fieldValue) => {
            if (err) return;
            window.alert(JSON.stringify(fieldValue));

        });
    }

    handleChangeStatus = (e) => {
        if (e.target.value === '异常') {
            this.setState({ status: true });
        }else{
            this.setState({ status: false });
        }
    }

    render() {
        const { form } = this.props;
        const { getFieldDecorator } = form;
        const { status } = this.state;

        return (
            <Card>
                <Form>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='体温(必填)'>
                                {
                                    getFieldDecorator('wendu', {
                                        rules: [{ required: true, message: '请填写体温' }],
                                    })(
                                        <InputNumber style={{ width: '100%' }} />
                                    )
                                }
                            </Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='身体状况(必填)'>
                                {
                                    getFieldDecorator('shenti', {
                                        rules: [{ required: true, message: '请选择身体状况' }],
                                    })(
                                        <Row gutter={24}>
                                            <Col span={10}>
                                                <Radio.Group onChange={this.handleChangeStatus}>
                                                    <Radio key='健康' value='健康'>健康</Radio>
                                                    <Radio key='异常' value='异常'>异常</Radio>
                                                </Radio.Group>
                                            </Col>
                                            {
                                                status ? (
                                                    <Col span={12}>
                                                        <Input placeholder='异常原因' />
                                                    </Col>
                                                ) : null
                                            }
                                        </Row>
                                    )
                                }
                            </Item>
                        </Col>

                    </Row>

                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='是否现场到岗(必填)'>
                                {
                                    getFieldDecorator('daogang', {
                                        rules: [{ required: true, message: '请选择是否现场到岗' }],
                                    })(
                                        <Radio.Group>
                                            <Radio key={1} value={1}>是</Radio>
                                            <Radio key={2} value={2}>否</Radio>
                                        </Radio.Group>
                                    )
                                }
                            </Item>
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Item label='备注'>
                                {
                                    getFieldDecorator('beizhu')(
                                        <Input.TextArea placeholder='请输入备注信息' />
                                    )
                                }
                            </Item>
                        </Col>
                    </Row>
                    <Row type='flex' justify='start'>
                        <Col span={6}>
                            <Button type='primary' onClick={this.handleSubmit}>提交</Button>
                        </Col>
                    </Row>
                </Form>
            </Card>
        );
    }
}

export default Study;
